// 导入第三方js-cookie模块
// 浏览器本地存储
// localStorage
// sessionStorage
// cookie
// 共同点: 都可以来做浏览器本地存储, 比如做token的管理(存取删)
// 区别:
// localStorage 永久存储, 除非主动删除
// sessionStorage 会话存储, 关闭网页自动删除
// localStorage 同域名的不同浏览器标签页可以共享
// sessionStorage 只能在当前浏览器标签页使用
// 不同源的本地存储不共享

// cookie区别:
// 它会自动在浏览器携带给后台, 而localStorage/sessionStorage需要你自己拼接
import Cookies from 'js-cookie'

const state = {
  sidebar: {
    // opened为true，代表侧边栏打开
    // opened为false，代表侧边栏关闭
    /**
     * 场景1：默认字符串为'0'
     * +'0'隐式转换为0 布尔值为false
     * !+'0':隐式转换为true
     * !!+'0':取反为false
     * 场景2：默认字符串为'1'
     * +'1'隐式转换为1 布尔值为true
     * !+'1':隐式转换为false
     * !!+'1':取反为true
     * 场景3：默认无值
     * +Cookies.get('sidebarStatus')结果为undefined   布尔值为false
     * !+Cookies.get('sidebarStatus') 隐式转换为true
     * !!+Cookies.get('sidebarStatus') 取反为false
     */
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    // 默认使用动画
    withoutAnimation: false
  },
  // 设备标识
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => { // 切换侧边栏打开状态
    // 调用此函数修改state.sidebar.opened的值
    state.sidebar.opened = !state.sidebar.opened
    // 使用动画
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) { // 如果 侧边栏打开 存入cookies为'1'
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => { // 关闭侧边栏
    // 设置cookies值为0
    Cookies.set('sidebarStatus', 0)
    // 关闭
    state.sidebar.opened = false
    // 设置是否使用动画
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    // 设置标识
    state.device = device
  }
}

const actions = {
  toggleSideBar ({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar ({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice ({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
